<template>
  <div class="share-page">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>商品分析</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/product-analysis' }">商品优化分析</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/product-analysis-look' }">详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="abnormal-page">
      <div class="statistic">
        <div class="item">
          <div class="name">设备名称:</div>
          <div class="value">新颜路1号</div>
        </div>
        <div class="item">
          <div class="name">设备编号:</div>
          <div class="value">556</div>
        </div>
        <div class="item">
          <div class="name">路线:</div>
          <div class="value">路线1</div>
        </div>
        <div class="item">
          <div class="name">补货员:</div>
          <div class="value">13306236880</div>
        </div>
        <div class="item">
          <div class="name">7天日均销售额:</div>
          <div class="value">¥ 656.00个</div>
        </div>
      </div>
      <div class="title">商品优化计划详情</div>
      <div class="title2">
        <div>
          <el-button :icon="RefreshLeft" round @click="$router.push('/product-analysis')">返回</el-button>
        </div>

        <div>
          当前设备总容量：0；调整后总容量：42
          <el-button
            round
            :icon="Plus"
            color="#0071bb"
            @click="$router.push('/product-analysis-details')"
            style="margin-left: 10px;"
          >新增商品优化</el-button>
        </div>
      </div>

      <div class="tables">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="img" label="商品图片">
            <template #default="scope">
              <img class="goods_img" :src="scope.row.img" />
            </template>
          </el-table-column>
          <el-table-column prop="id" label="商品名称" />
          <el-table-column prop="open_time" label="商品条码" />
          <el-table-column prop="close_time" label="上架时长" />
          <el-table-column prop="pay_time" label="近7日销量" />
          <el-table-column prop="pay_method" label="近7日复购人数" />
          <el-table-column prop="order_num" label="近7日毛利率" />
          <el-table-column prop="order_type" label="当前容量"></el-table-column>
          <el-table-column prop="name" label="建议" />
          <el-table-column prop="imei" label="调整后容量" />
          <el-table-column prop="check" label="计划优化方案">
            <template #default="scope">
              <div class="check-text">{{scope.row.check}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="imei" label="补货员执行后容量" width="160px" />
        </el-table>
      </div>
      <div class="page_number">
        <el-pagination
          v-model:current-page="pager.currentPage"
          v-model:page-size="pager.pageSize"
          layout="prev, pager, next, jumper,total"
          :total="pager.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { RefreshLeft, Plus } from "@element-plus/icons-vue";
const tableData = [
  {
    id: "1",
    img:
      "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    open_time: "2024-12-01 12:00:00",
    close_time: "2024-12-01 12:00:00",
    pay_time: "2024-12-01 12:00:00",
    pay_method: "微信",
    order_num: "87434893841",
    order_type: "扣款异常",
    name: "伯克材料3668649",
    imei: "8698254043668649",
    tell: "139849894494",
    personnel: "小郑",
    check: "下载"
  },
  {
    id: "2",
    img:
      "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    open_time: "2024-12-01 12:00:00",
    close_time: "2024-12-01 12:00:00",
    pay_time: "2024-12-01 12:00:00",
    pay_method: "支付宝",
    order_num: "87434893841",
    order_type: "开门异常",
    name: "伯克材料3668649",
    imei: "8698254043668649",
    tell: "139849894494",
    personnel: "小郑",
    check: "新增7补货量"
  },
  {
    id: "3",
    img:
      "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    open_time: "2024-12-01 12:00:00",
    close_time: "2024-12-01 12:00:00",
    pay_time: "2024-12-01 12:00:00",
    pay_method: "支付宝",
    order_num: "87434893841",
    order_type: "关门异常",
    name: "伯克材料3668649",
    imei: "8698254043668649",
    tell: "139849894494",
    personnel: "小郑",
    check: "新增7补货量"
  },
  {
    id: "4",
    img:
      "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    open_time: "2024-12-01 12:00:00",
    close_time: "2024-12-01 12:00:00",
    pay_time: "2024-12-01 12:00:00",
    pay_method: "金币",
    order_num: "87434893841",
    order_type: "识别异常",
    name: "伯克材料3668649",
    imei: "8698254043668649",
    tell: "139849894494",
    personnel: "小郑",
    check: "新增7补货量"
  },
  {
    id: "4",
    img:
      "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    open_time: "2024-12-01 12:00:00",
    close_time: "2024-12-01 12:00:00",
    pay_time: "2024-12-01 12:00:00",
    pay_method: "金币",
    order_num: "87434893841",
    order_type: "已处理",
    name: "伯克材料3668649",
    imei: "8698254043668649",
    tell: "139849894494",
    personnel: "小郑",
    check: "新增7补货量"
  }
];

// 分页
const pager = ref({
  currentPage: 1,
  pageSize: 10,
  total: 10
}); // 改变pageSize
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
// 改变当前页码 currentPage
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>

<style lang="scss" scoped>
.abnormal-page {
  background-color: #fff;
  margin-top: 10px;
  padding: 10px;

  .statistic {
    width: 100%;
    border-radius: 20px;
    padding: 24px 10px;
    display: flex;
    background: #0071bb;
    align-items: center;
    .item {
      width: 25%;
      color: #fff;
      text-align: left;
      border-right: 1px solid #fff;
      padding: 0 20px;
      box-sizing: border-box;
      .value {
        font-size: 24px;
        // margin-left: 20px;
        font-weight: 500;
      }
    }
    .item:last-child {
      border-right: none;
    }
  }
  .title {
    font-size: 16px;
    color: #000;
    padding: 10px;
  }

  .title2 {
    // background: #d9d9d9;
    color: #4d4d4d;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding: 0px 20px;
    margin: 10px 0px;
  }

  .tables {
    .check-text {
      color: #0071bb;
      cursor: pointer;
    }
  }
  .goods_img {
    width: 30px;
    height: 50px;
  }
}
</style>
